<template>
    <el-dialog :visible.sync="showVisible" title="叫号显示界面配置" width="80%" center @close="showVisible=false">
        <div style="width:80%;background-color: white; text-align: center;margin: 0px auto;">
            <el-card>
                <div class="layout">
                    <div v-for="(item,index) in getFileds()" :key="index" :class="getClass(item.selectValue)">
                        <div v-for="(subItem,subIndex) in item.checkboxValue" :key="subIndex">{{subItem}}</div>
                    </div>
                </div>
            </el-card>
            <el-card>
                <div class="select_layout">
                    <div v-for="(item,index) in fileds" :key="index">
                        <el-checkbox-group v-model="item.checkboxValue">
                            <el-checkbox v-for="(subItem,subIndex) in item.checkbox" :key="subIndex"
                                :label="subItem.attrName" :value="subItem"></el-checkbox>
                        </el-checkbox-group>
                        <div>
                            布局选择:
                            <el-select v-model="item.selectValue" clearable placeholder="请选择">
                                <el-option v-for="subItem in selects" :key="subItem.key" :label="subItem.value"
                                    :value="subItem.key" />
                            </el-select>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang='ts'>
import { IDevice } from '@/api/types';
import { DevicesModule } from '@/store/modules/device';
import Vue from 'vue'

export default Vue.extend({
    props: [],
    data() {
        return {
            selects: [{ key: "1", value: "顶部" }, { key: "2", value: "居中" }, { key: "3", value: "底部" }],
            fileds: [
                { checkboxValue: [], checkbox: [{ attrId: 1, attrName: "科室" }], selectValue: "" },
                { checkboxValue: [], checkbox: [{ attrId: 2, attrName: "诊室" }], selectValue: "" },
                { checkboxValue: [], checkbox: [{ attrId: 3, attrName: "医生" }, { attrId: 5, attrName: "工位" }], selectValue: "" },
                { checkboxValue: [], checkbox: [{ attrId: 4, attrName: "姓名" }], selectValue: "" },],
            checkList: [],
            showVisible: false,
            device: { deviceShowConfig: "" },
            resultList: [{ name: "科室", layout: "center" }]
        }
    },
    methods: {
        getFileds() {
            return this.fileds.filter(value => {
                return value.checkboxValue.length > 0
            })
        },
        getClass(type: string) {
            if (type == "1") {
                return "sub-layout-top";
            }
            if (type == "2") {
                return "sub-layout-center";
            }
            if (type == "3") {
                return "sub-layout-bottom"
            }
            return "sub-layout-center";
        },
        submit() {
            if (this.fileds[2].checkboxValue.length) {//排一个序
                if (this.fileds[2].checkboxValue[0] == '工位') {
                    let v = this.fileds[2].checkboxValue.splice(0, 1)[0];
                    this.fileds[2].checkboxValue.push(v);
                }
            }
            this.device.deviceShowConfig = JSON.stringify(this.fileds);
            // console.error(this.device);
            DevicesModule.updateDevice(this.device as any).then((v: any) => {
                console.error(v)
                if (v >= 1) {
                    this.showVisible = false;
                }
            })
        },
        showDialog(data: IDevice) {
            this.device = data;
            console.error(this.device);
            let str = this.device.deviceShowConfig;
            if (str) {
                this.fileds = JSON.parse(str);
            }
            this.showVisible = true;
        },
    }
})


</script>

<style>
.layout {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 300px;
    background-color: cornflowerblue;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 2vw;
    color: #FFFFFF;
    font-weight: bold;
}

.layout>div {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

.sub-layout-top {
    align-items: flex-start
}

.sub-layout-center {
    align-items: center;
}

.sub-layout-bottom {
    align-items: flex-end
}

.select_layout {
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* background-color: antiquewhite; */
}

.select_layout>div {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
</style>

